<template>
  <div>
    <van-grid :column-num="4" :icon-size="50">
      <van-grid-item
        v-for="(v, index) in arr"
        :key="index"
        :icon="v"
        :text="text[index]"
        @click="fun(index)"
      />
    </van-grid>
    <div class="box">
      <div class="left">
        <div class="lefttop">
          <img
            src="https://static.asus.com.cn/store/20230202/18492553565597.png"
            alt=""
          />
        </div>
        <div class="leftbtn">
          <img
            src="https://static.asus.com.cn/store/20230202/18433757569850.png"
            alt=""
          />
        </div>
        <div class="leftbtn">
          <img
            src="https://static.asus.com.cn/store/20230201/21413410153571.png"
            alt=""
          />
        </div>
      </div>
      <div class="right">
        <div class="righttop">
          <img
            src="https://static.asus.com.cn/store/20230201/21383155985655.png"
            alt=""
          />
        </div>
        <div class="righttop">
          <img
            src="https://static.asus.com.cn/store/20230204/15133648100974.png"
            alt=""
          />
        </div>
        <div class="righttop">
          <img
            src="https://static.asus.com.cn/store/20230201/21394310251991.png"
            alt=""
          />
        </div>
        <div class="righttop">
          <img
            src="https://static.asus.com.cn/store/20230201/21421757569852.png"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Grid, GridItem } from "vant";
Vue.use(Grid);
Vue.use(GridItem);

export default {
  data() {
    return {
      arr: [],
      text: [],
    };
  },
  mounted() {
    this.$http({
      url: "http://localhost:3000/navigation",
      method: "get",
    }).then((res) => {
      res.data.forEach((element) => {
        this.text = element.data.hxtext;
        this.arr = element.data.myimg;
      });
    });
  },
  methods:{
    fun(index){
      if( index == 6){
        this.$router.push({path:'/navigation7'}).catch(err=>{})
      }
      if( index == 7){
        this.$router.push({path:'/navigation8'}).catch(err=>{})
      }
    }
  }
};
</script>

<style scoped>
.box {
  display: flex;
  flex-wrap: wrap;
}
.left {
  display: flex;
  flex-wrap: wrap;
 width: 48%;
  height: 400px;
}
.right {
  width: 48%;
  height: 400px;
}
.righttop {
  width: 100%;
  height: 100px;
}
.righttop img {
  width: 100%;
  height: 100%;
}
.lefttop {
  width: 100%;
  height: 200px;
}
.leftbtn {
  width: 100%;
  height: 100px;
}
.lefttop img {
  height: 100%;
  width: 100%;
}
.leftbtn img {
  width: 100%;
  height: 100px;
}
</style>